<template>
  <div class="container">
    <div class="im-bar">
      <el-row>
        <!-- <el-col :span="6"> -->
        <div class="search">
          <input
            v-model="searchText"
            @keyup.enter="handleSearch"
            type="text"
            name="searchText"
            autocomplete="off"
            placeholder="搜索"
          />
          <el-icon class="search-icon"><Search /></el-icon>
          <el-icon class="search-close" @mousedown.native="inputClean"
            ><CircleCloseFilled
          /></el-icon>
          <Panel class="search-panel">
            <h3 style="border-bottom: 1px solid #ccc">好友</h3>
            <div class="panel-item" v-for="(item, index) in findList.users" :key="index">
              <Contact :data="item"></Contact>
            </div>
            <el-empty
              description="没有数据"
              v-show="findList.users.length == 0"
            ></el-empty>
            <h3 style="border-bottom: 1px solid #ccc">聊天记录</h3>
            <div
              class="panel-item"
              v-for="(item, index) in findList.records"
              :key="index"
            >
              {{ item }}
            </div>
          </Panel>
        </div>

        <el-dropdown style="display: flex; align-items: center">
          <el-icon style="color: #fff; margin: 0 10px; cursor: pointer"
            ><arrow-down
          /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="openAdd">添加好友/群</el-dropdown-item>
              <el-dropdown-item>创建群</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <el-button circle icon=""></el-button> -->
        <!-- </el-col> -->
      </el-row>

      <!-- <el-icon><Search /></el-icon> -->
    </div>
    <!-- <div class="main" style="display: flex"> -->
    <div class="aside-bar">
      <!-- 侧边栏 -->
    </div>
    <div class="wrapper">
      <div class="contact-list">
        <Contact
          class="contact-item"
          :class="{ active: currContact === item }"
          v-for="item in users"
          :key="item.userId"
          :data="item"
          @select="handleSelect"
        />
      </div>
      <div class="panel">
        <chat-conversation v-if="currContact" v-model="currContact"></chat-conversation>
        <el-empty
          description="选择好友进行聊天"
          v-if="!currContact"
          style="background: #fff"
        >
          <template #image>
            <el-icon :size="100"><InfoFilled /></el-icon
          ></template>
          <div class="clock">
            {{ Time }}
          </div>
        </el-empty>
      </div>
    </div>
    <!-- </div> -->
  </div>

  <Window title="添加好友" v-if="addFriendVisible" @close="addFriendVisible = false">
    <AddFriendCom></AddFriendCom>
  </Window>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted, provide, inject } from "vue";
import { Search } from "@element-plus/icons-vue";
import Panel from "@/components/Panel.vue";
import Contact from "./Contact.vue";
import ChatConversation from "./chatconversation/ChatConversation.vue";
import Window from "./window/Window.vue";
import AddFriendCom from "./addfriend/AddFriend.vue";
import { listFriends, addFriend, removeFriend, findFriends } from "@/api/friend";

import { onlines } from "@/api/im";

import { useFriendStore } from "@/stores/friend";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();

// import WebSocketServer from "@/utils/WebSocket";

const friendStore = useFriendStore();
const currContact = ref<any>(null);

const searchText = ref("");

const addFriendVisible = ref(false);

const userId = computed(() => userStore.userId);

// const ws = new WebSocketServer("im-chat");

// const socketservice = <any>inject("socketService");
// const socket = new socketservice("chat");
// socket.connect(userId.value);

// provide("chat-socket", socket);

const findList = ref<any>({
  users: [],
  records: [],
});

const users = ref<any[]>([]);

onMounted(() => {
  loadData();
});

function loadData() {
  friendStore.getList().then((list: any) => {
    users.value = list;
  });
  // 更新在线状态
  onlines().then((res) => {
    const onlines = res.data;
    users.value.forEach((item) => {
      if (onlines.some((id: any) => id == item.userId)) {
        item.online = true;
      }
    });
  });
}

function handleSearch() {}

function inputClean() {
  searchText.value = "";
  findList.value.users = [];
  findList.value.records = [];
  // console.log("close");
}

watch(searchText, handleUpdate);

function handleUpdate(value: any) {
  if (value == null || value.trim() == "") {
    findList.value.users = [];
    return;
  }
  // 对于item中的每一个属性，只要值包含value则是需要的数据
  const findUsers = users.value.filter((item: any) =>
    Object.values(item).some((item: any) => item.toString().includes(value))
  );
  findList.value.users = findUsers;
}

function handleSelect(data: any) {
  // console.log(data);

  currContact.value = data;
}

function openAdd() {
  addFriendVisible.value = true;
}

const Time = ref("");

let timer: any = null;
timer = setInterval(() => {
  const date = new Date();
  Time.value = `${date
    .toLocaleDateString()
    .replace(/\//g, "-")}  ${date.toLocaleTimeString()}`;
  if (currContact.value) clearInterval(timer);
}, 1000);
</script>

<style scoped lang="less">
.active {
  background: rgba(127, 127, 127, 0.2) !important;
  // background: #9aa7b1 !important;
}
.container {
  --border-radius: 10px;
  --main-color: #6b798e;
  width: 80%;
  max-width: 960px;
  min-width: 800px;
  height: calc(100vh - 100px);
  min-height: 600px;
  margin: 10px auto;
  // overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: start;

  .im-bar {
    width: 100%;
    padding: 1rem 1rem;
    background: var(--main-color);
    border-radius: 5px;
  }

  .search {
    position: relative;
    input {
      display: inline-block;
      padding: 10px 1.5rem;
      outline: none;
      border: none;
      background: rgba(242, 242, 242, 0.3);
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      transition: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
      // box-sizing: border-box;
      &:focus {
        background: #fff;
        pointer-events: none;
        ~ .search-close {
          display: block;
          pointer-events: auto;
        }

        ~ .search-icon {
          color: #000;
        }

        ~ .search-panel {
          display: block;
        }
      }
      &::placeholder {
        font-size: 0.8rem;
        color: #fff;
      }
    }

    .search-icon {
      position: absolute;
      left: 0.25rem;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
      transition: all 0.2s linear;
    }

    .search-close {
      position: absolute;
      right: 0.25rem;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      cursor: pointer;
      transition: all 0.2s linear;
      // pointer-events: none;
    }

    .search-panel {
      position: absolute;
      left: 0;
      top: 2rem;
      min-width: 300px;
      min-height: 200px;
      max-width: 600px;
      max-height: 600px;
      background: #fff;
      z-index: 999;
      margin: 0;
      border-radius: 5px;
      box-shadow: var(--box-shadow-light);
      overflow: auto;
      display: none;
      padding: 10px 5px;
    }
  }

  .wrapper {
    width: 100%;
    height: calc(100% - 3rem);
    display: grid;
    grid-template-columns: 300px auto;
    grid-gap: 5px;
    padding: 5px 0 5px 0;
    // background: #bfe6ff;;
    // background: #9aa7b1;
    .contact-list {
      width: 300px;
      height: 100%;
      border-right: 1px solid rgba(127, 127, 127, 0.2);
      overflow-y: scroll;
      cursor: col-resize;
      padding: 5px;
      border-radius: var(--border-radius);
      background: #fff;
      // box-shadow: var(--box-shadow-light);
      user-select: none;
    }

    .panel {
      height: 100%;
      // background: #fff;
      border-radius: var(--border-radius);
      overflow: auto;
    }
  }
}

.clock {
  font-size: 2rem;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
</style>
